<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/jquery-1.12.1.min.js" type="text/javascript" charset="utf-8"></script>
		
		
		<script>
			
			$(function(){
			
				$("#btn1").click(function(){
					$(".inner").append("innert append")
				})
				
				$("#btn2").click(function(){
					$(".inner").prepend("innert prepend")
				})
				
				$("#btn3").click(function(){
					$(".inner").after("after")
				})
				
				$("#btn4").click(function(){
					$(".inner").before("before")
				})
				
				
				
				//$("<div>prependTo</div>")     ====    document.createElement('div');
				
				$("#btn5").click(function(){
					$("<div>appendTo</div>").appendTo(".inner")
				})
				
				$("#btn6").click(function(){
					$("<div>prependTo</div>").prependTo(".inner")
				})
				
				$("#btn7").click(function(){
					
					$("<div>insertAfter</div>").insertAfter(".inner")
				})
				
				$("#btn8").click(function(){
					$("<div>insertBefore</div>").insertBefore(".inner")
				})
				
			})
			
		</script>
	</head>
	<body >

		<div id="outer" class="ccs">
			aaaaaaaaaaaaaaa
			
			<div class="inner">
				bbbbbbbbbbbbbb
			</div>  
			
			ccccccccccccc
		</div>

		<button id="btn1">append</button>
		<button id="btn2">prepend</button>
		<button id="btn3">after</button>
		<button id="btn4">before</button>
		
		
		
		<br>
		<button id="btn5">appendTo</button>
		<button id="btn6">prependTo</button>
		<button id="btn7">insertAfter</button>
		<button id="btn8">insertBefore</button>
		
	</body>
</html>
